<template>
  <div class="b-uploader" @click="handleUpload">
    <input ref="fileInputRef" type="file" class="file-input" @change="handleFileChange" />
    <el-icon size="20" v-if="!imageUrl">
      <Plus />
    </el-icon>
    <img class="b-uploader-img" :src="imageUrl" v-else>
  </div>
</template>
<script setup lang='ts'>
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'

const imageUrl = ref('')

const fileInputRef = ref()
function handleUpload () {
  fileInputRef.value.click()
}

function handleFileChange (e) {
  console.log(e.target.files[0]);
  imageUrl.value = window.URL.createObjectURL(e.target.files[0])
}
</script>
<style lang="scss" scoped>
.b-uploader {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  border: 1px solid var(--el-border-color);
  overflow: hidden;
  cursor: pointer;
  font-size: 14px;

  .file-input {
    position: absolute;
    width: 100%;
    height: 100%;
    visibility: hidden;
  }

  .b-uploader-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
</style>
